<script setup>
import LayoutNav from '../../Layout/components/LayoutNav.vue';
import LayoutFooter from '../../Layout/components/LayoutFooter.vue';
import DetailHot from './DetailHot.vue';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import router from '@/router';

const goods = ref({
  properties: [
    { name: "颜色", value: "红色" },
    { name: "尺码", value: "M" },
    { name: "材质", value: "棉质" }
  ],
  pictures: [
    "https://img.diytrade.com/smimg/122287/49109630-11319999-0/%E8%A1%AC%E8%A1%AB/2977.png",
    "https://img.diytrade.com/smimg/122287/49109632-11320001-0/%E8%A1%AC%E8%A1%AB/284c.png",
    "https://img.diytrade.com/smimg/122287/49109633-11320002-0/%E8%A1%AC%E8%A1%AB/ea04.png"
  ]
  ,
  mainPictures: [
    "https://img.diytrade.com/smimg/122287/49109630-11319999-0/%E8%A1%AC%E8%A1%AB/2977.png",
    "https://img.diytrade.com/smimg/122287/49109632-11320001-0/%E8%A1%AC%E8%A1%AB/284c.png",
    "https://img.diytrade.com/smimg/122287/49109633-11320002-0/%E8%A1%AC%E8%A1%AB/ea04.png"
  ],
  salesCount: 100,
  commentCount: 50,
  collectCount: 80,
  brand: { name: "品牌 X" },
  good_id: "1",
  name: "清爽舒适，青年格子衬衫",
  desc: "这款格子衬衫采用优质抓绒材质，保暖又舒适，独特的花纹设计。",
  price: 150,
  categories: [
    { id: 1, name: "衬衫" },
    { id: 2, name: "上装" }
  ],
  specs: [
    {
      name: "颜色",
      id: "154",
      values: [
        {
          name: "红色",
          picture: "",
          desc: "销售属性颜色-红色-规格属性图片",
        },
        {
          name: "灰色",
          picture: "",
          desc: "销售属性颜色-灰色-规格属性图片",
        },
        {
          name: "白色",
          picture: "",
          desc: "销售属性颜色-白色-规格属性图片",
        },
      ],
    },
    {
      name: "尺码",
      id: "1146",
      values: [
        {
          name: "S",
          picture: null,
          desc: "销售属性尺码-L-规格属性图片",
        },
        {
          name: "M",
          picture: null,
          desc: "销售属性尺码-M-规格属性图片",
        },
        {
          name: "L",
          picture: null,
          desc: "销售属性尺码-L-规格属性图片",
        }
      ],
    },
  ],
  skus: [
     {
      id: "1",
      skuCode: "1",
      price: "158.00",
      inventory: 2512,
      picture: "https://yanxuan-item.nosdn.127.net/7339f75f850ed80699c000a2e7ceda09.png",
      specs: [
        {
          name: "颜色",
          valueName: "红色",
        },
        {
          name: "尺码",
          valueName: "S",
        },
      ],
    },
    {
      id: "1",
      skuCode: "1",
      price: "158.00",
      inventory: 2512,
      picture: "https://yanxuan-item.nosdn.127.net/7339f75f850ed80699c000a2e7ceda09.png",
      specs: [
        {
          name: "颜色",
          valueName: "红色",
        },
        {
          name: "尺码",
          valueName: "M",
        },
      ],
    },
    {
      id: "2",
      skuCode: "2",
      price: "158.00",
      inventory: 9806,
      picture: "https://yanxuan-item.nosdn.127.net/7339f75f850ed80699c000a2e7ceda09.png",
      specs: [
        {
          name: "颜色",
          valueName: "红色",
        },
        {
          name: "尺码",
          valueName: "L",
        },
      ],
    },
    {
      id: "3",
      skuCode: "3",
      price: "158.00",
      inventory: 4082,
      picture: "https://yanxuan-item.nosdn.127.net/c1d2a0a7cc99118ece0d088e7157adda.png",
      specs: [
        {
          name: "颜色",
          valueName: "灰色",
        },
        {
          name: "尺码",
          valueName: "S",
        },
      ],
    },
    {
      id: "3",
      skuCode: "3",
      price: "158.00",
      inventory: 4082,
      picture: "https://yanxuan-item.nosdn.127.net/c1d2a0a7cc99118ece0d088e7157adda.png",
      specs: [
        {
          name: "颜色",
          valueName: "灰色",
        },
        {
          name: "尺码",
          valueName: "M",
        },
      ],
    },
    {
      id: "4",
      skuCode: "4",
      price: "158.00",
      inventory: 3612,
      picture: "https://yanxuan-item.nosdn.127.net/c1d2a0a7cc99118ece0d088e7157adda.png",
      specs: [
        {
          name: "颜色",
          valueName: "灰色",
        },
        {
          name: "尺码",
          valueName: "L",
        },
      ],
    },
    {
      id: "5",
      skuCode: "5",
      price: "158.00",
      inventory: 4836,
      picture: "https://yanxuan-item.nosdn.127.net/8f143156d842d9adc78c1e4aeeea4e5f.png",
      specs: [
        {
          name: "颜色",
          valueName: "白色",
        },
        {
          name: "尺码",
          valueName: "M",
        },
      ],
    },
    {
      id: "6",
      skuCode: "6",
      price: "158.00",
      inventory: 988,
      picture: "https://yanxuan-item.nosdn.127.net/8f143156d842d9adc78c1e4aeeea4e5f.png",
      specs: [
        {
          name: "颜色",
          valueName: "白色",
        },
        {
          name: "尺码",
          valueName: "L",
        },
      ],
    },
    {
      id: "7",
      skuCode: "7",
      price: "158.00",
      inventory: 988,
      picture: "https://yanxuan-item.nosdn.127.net/8f143156d842d9adc78c1e4aeeea4e5f.png",
      specs: [
        {
          name: "颜色",
          valueName: "白色",
        },
        {
          name: "尺码",
          valueName: "S",
        },
      ],
    },
    {
      id: "8",
      skuCode: "8",
      price: "158.00",
      inventory: 988,
      picture: "https://yanxuan-item.nosdn.127.net/8f143156d842d9adc78c1e4aeeea4e5f.png",
      specs: [
        {
          name: "颜色",
          valueName: "白色",
        },
        {
          name: "尺码",
          valueName: "M",
        },
      ],
    },
    {
      id: "9",
      skuCode: "9",
      price: "158.00",
      inventory: 988,
      picture: "https://yanxuan-item.nosdn.127.net/8f143156d842d9adc78c1e4aeeea4e5f.png",
      specs: [
        {
          name: "颜色",
          valueName: "白色",
        },
        {
          name: "尺码",
          valueName: "L",
        },
      ],
    },
  ]
});
const positiveRatingCount = ref(30);
const mediumRatingCount = ref(5);
const negativeRatingCount = ref(5);


//获取商品细节
// import { getGoodByIdAPI } from '@/api/good'
// const goods = ref({})
const route = useRoute()
// const getGoodDetail = async () => {
//   const res = await getGoodByIdAPI(route.params.goodid)
//   goods.value = res.rows
// }
// getGoodDetail()

//获取商品评论
// import { getCommentListAPI } from '@/api/good'
// const commentList = ref([])
// const getCommentList = async () => {
//   const res = await getCommentListAPI({
//     goodid: route.params.goodid
//   })
//   commentList.value = res.rows
//   totalComments.value = res.total;
// }
// getCommentList()
console.log("商品id " + route.params.goodid);
const totalComments = ref(40);


const comments = ref([
  {
    id: 1,
    avatarUrl: 'avatar1.jpg',
    username: '用户 A',
    content: '这个商品非常棒！',
    date: '2024-10-14 10:30',
    rating: 4
  },
  {
    id: 2,
    avatarUrl: 'avatar2.jpg',
    username: '用户 B',
    content: '还不错，就是有点小贵。',
    date: '2024-10-13 15:45',
    rating: 3
  },
    {
    id: 3,
    avatarUrl: 'avatar1.jpg',
    username: '用户 A',
    content: '这个商品很好！',
    date: '2024-10-14 10:30',
    rating: 4
  },
  {
    id: 4,
    avatarUrl: 'avatar2.jpg',
    username: '用户 B',
    content: '还不错，有点贵。',
    date: '2024-10-15 15:45',
    rating: 4
  },
]);


//商品详情页标签
const activeName = ref('first')

const skuChange = (sku) => {
  console.log(sku);
  typeof(sku)
  checkInfo.value.sku = sku.specsText
}

//商品数量count
const count = ref(1)
const countChange = (count) => {
  console.log(count)
  checkInfo.value.count = count
  checkInfo.value.totalPrice = count * checkInfo.value.price
}

const checkInfo = ref({
  good_id: goods.value.good_id,
  name: goods.value.name,
  salerName: '桃禧服装店',
  price: goods.value.price,
  totalPrice:null,
  picture: goods.value.pictures[0],
  count: count.value ,
  sku: ''
})
import { useOrderStore } from '@/store/order';
const orderStore = useOrderStore();
//立即购买
const paychase = async () => {
  console.log(checkInfo.value);
  if (checkInfo.value.sku == ''){
    ElMessage.error('请选择商品规格')
    return
  }
  orderStore.setCheckInfo(checkInfo.value);
  router.push('/order')
}

</script>

<template>
    <LayoutNav/>
    <div class="container">
        <div class="header-box">
        <div class="logo">
        <RouterLink to="/">桃禧</RouterLink>
        </div>
        <p></p>
        <div class="search-box">
            <el-input 
            placeholder="搜索商品" 
            size="big" 
            clearable ></el-input>
            <el-button 
            type="primary" 
            size="big"
            @click="searchItems">
            搜索
            <i class="iconfont icon-search"></i>
        </el-button>
        </div>
      </div>
    </div>
    <!-- <div class="container">
      <div class="info-container">

      </div>
    <div @click="router.push('/order')"><h1>商品详情</h1></div>
    </div> -->

    <div class="goods-page">
    <div class="container" v-if="goods">
      <!-- 客服咨询 -->
      <div class="other-container">
        <!-- <div class="btn" style="display: flex; align-items: center;">
          联系 客服
        </div>
        <div class="btn" style="display: flex; align-items: center;">
          <RouterLink :to="'/crowdFunding/launchCrowdFunding/' + goods.good_id">
            众筹 定制
          </RouterLink>
        </div> -->
        <router-link to="/custermer" class="btn">
          定制商品联系客服
        </router-link >
        <router-link :to="{name: 'launchCrowdFunding', params: {goodid: goods.good_id}}" class="btn">
          众筹定制
        </router-link >
      </div>
      <div class="bread-container">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <!-- 
            错误原因：goods一开始{}  {}.categories -> undefined  -> undefined[1]
            1. 可选链的语法?. 
            2. v-if手动控制渲染时机 保证只有数据存在才渲染
          -->
          <el-breadcrumb-item :to="{ path: `/category/${goods.categories[1].id}` }">{{ goods.categories[1].name }}
          </el-breadcrumb-item>
          <!-- <el-breadcrumb-item :to="{ path: `/category/sub/${goods.categories[0].id}` }">{{
            goods.categories[0].name
          }}
          </el-breadcrumb-item> -->
          <el-breadcrumb-item>清爽舒适，青年格子衬衫</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 商品信息 -->
      <div class="info-container">
        <div>
          <div class="goods-info">
            <div class="media">
              <!-- 图片预览区 -->
              <ImageView :image-list="goods.mainPictures"/> 
              <!-- 统计数量 -->
              <ul class="goods-sales">
                <li>
                  <p>销量人气</p>
                  <p> {{ goods.salesCount }}+ </p>
                  <p><i class="iconfont icon-task-filling"></i>销量人气</p>
                </li>
                <li>
                  <p>商品评价</p>
                  <p>{{ goods.commentCount }}+</p>
                  <p><i class="iconfont icon-comment-filling"></i>查看评价</p>
                </li>
                <li>
                  <p>收藏人气</p>
                  <p>{{ goods.collectCount }}+</p>
                  <p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>
                </li>
                <li>
                  <p>店铺信息</p>
                  <p>{{ goods.brand.name }}</p>
                  <p><i class="iconfont icon-dynamic-filling"></i>店铺主页</p>
                </li>
              </ul>
            </div>
            <div class="spec">
              <!-- 商品信息区 -->
              <p class="g-name"> {{ goods.name }} </p>
              <p class="g-desc">{{ goods.desc }} </p>
              <p class="g-price">
                <span>{{ goods.price }}</span>
              </p>
              <div class="g-service">
                <dl>
                  <dt>促销</dt>
                  <dd>12月好物放送，领券购买直降120元</dd>
                </dl>
                <dl>
                  <dt>服务</dt>
                  <dd>
                    <span>无忧退货</span>
                    <span>快速退款</span>
                    <span>免费包邮</span>
                    <a href="javascript:;">了解详情</a>
                  </dd>
                </dl>
              </div>
              <!-- sku组件 -->
              <TaoxiSku :goods="goods" @change="skuChange"/>
              <!-- 数据组件 -->
              <el-input-number v-model="count"  @change="countChange"/>
              <!-- 按钮组件 -->
              <div>
                <el-button size="large" class="btn" type="primary" @click="paychase">
                  立即购买
                </el-button>
              </div>
            </div>
          </div>
          <div class="goods-footer">
            <div class="goods-article">
              <!-- 商品详情 -->
              <div class="goods-tabs">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                  <el-tab-pane label="商品详情" name="first">
                  <div class="goods-detail">
                    <ul class="attrs">
                      <li v-for="item in goods.properties" :key="item.value">
                        <span class="dt">{{ item.name }}</span>
                        <span class="dd">{{ item.value }}</span>
                      </li>
                    </ul>
                    <img v-for="img in goods.pictures" :src="img" :key="img" alt="">
                  </div>
                  </el-tab-pane>
                  <el-tab-pane label="商品评价" name="second">
                    <div class="good-commont">
                    <div class="commont-head">
                      <h1>所有评价</h1>
                      <ul>
                        <li>共计{{ totalComments }}条评论</li>
                        <li>{{ positiveRatingCount }}条好评</li>
                        <li>{{ mediumRatingCount }}条中评</li>
                        <li>{{ negativeRatingCount }}条差评</li>
                      </ul>
                    </div>
                    <div class="commont-item">
                      <ul>
                        <li v-for="comment in comments" :key="comment.id">
                          <div class="commont-box">
                            <el-avatar class="avater" :size="50" :src="comment.avatarUrl" />
                            <div class="main">
                              <div class="header"><p>{{ comment.username }}</p></div>
                              <div class="content"><p>{{ comment.content }}</p></div>
                              <div class="footer">
                                <p>{{ comment.date }}</p>
                                <el-rate v-model="comment.rating" disabled/>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <el-pagination
                      :page-size="20"
                      :pager-count="11"
                      layout="prev, pager, next"
                      :total="1000"
                    />
                </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <!-- 24热榜+专题推荐 -->
            <div class="goods-aside">
                <DetailHot />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
    <LayoutFooter/>
</template>

<style scoped lang='scss'>
.header-box{
    background: #fff;
    position: relative;
    height: 120px;
    border-bottom:1px solid #ccc;
    display: flex;
    p{
      font-size: 24px;
      margin-left: 20px;
      margin-top: 50px;
    }
    .logo {
    margin-left: 50px;
    width: 80px;

    a {
      display: block;
      height: 100px;
      width: 100%;
      text-indent: -9999px;
      background: url('@/assets/images/logo.png') no-repeat center 18px / contain;
    }
  }
  .search-box{
    position: absolute;
    display: flex;
    justify-content: center;
    top: 50%;
    right:50px;
    .el-input {
        margin-left: 20px;
    }
    .el-button{
        margin-left: 20px;
    }
  }
}
    .container{
      background-color: #fff;
    }

    .goods-page {
  .goods-info {
    min-height: 600px;
    background: #fff;
    display: flex;

    .media {
      width: 580px;
      height: 600px;
      padding: 30px 50px;
    }

    .spec {
      flex: 1;
      padding: 30px 30px 30px 0;
    }
  }

  .goods-footer {
    display: flex;
    margin-top: 20px;

    .goods-article {
      width: 940px;
      margin-right: 20px;
    }

    .goods-aside {
      width: 280px;
      min-height: 1000px;
    }
  }

  .goods-tabs {
    min-height: 600px;
    background: #fff;
  }

  // ::v-deep .el-tabs__nav{
  //   width: 180px;
  // }
    /* 内容文字 */
  :v-deep .el-tabs__item {
    padding: 20px !important; //内容与padding框的距离
    margin-right: 20px;
    font-size: 20px !important; //更改选项卡标签的字体大小
  }

  .goods-warn {
    min-height: 600px;
    background: #fff;
    margin-top: 20px;
  }

  .number-box {
    display: flex;
    align-items: center;

    .label {
      width: 60px;
      color: #999;
      padding-left: 10px;
    }
  }

  .g-name {
    font-size: 22px;
  }

  .g-desc {
    color: #999;
    margin-top: 10px;
  }

  .g-price {
    margin-top: 10px;

    span {
      &::before {
        content: "¥";
        font-size: 14px;
      }

      &:first-child {
        color: $priceColor;
        margin-right: 10px;
        font-size: 22px;
      }
    }
  }

  .g-service {
    background: #f5f5f5;
    width: 500px;
    padding: 20px 10px 0 10px;
    margin-top: 10px;

    dl {
      padding-bottom: 20px;
      display: flex;
      align-items: center;

      dt {
        width: 50px;
        color: #999;
      }

      dd {
        color: #666;

        &:last-child {
          span {
            margin-right: 10px;

            &::before {
              content: "•";
              color: $xtxColor;
              margin-right: 2px;
            }
          }

          a {
            color: $xtxColor;
          }
        }
      }
    }
  }

  .goods-sales {
    display: flex;
    width: 400px;
    align-items: center;
    text-align: center;
    height: 140px;

    li {
      flex: 1;
      position: relative;

      ~li::after {
        position: absolute;
        top: 10px;
        left: 0;
        height: 60px;
        border-left: 1px solid #e4e4e4;
        content: "";
      }

      p {
        &:first-child {
          color: #999;
        }

        &:nth-child(2) {
          color: $priceColor;
          margin-top: 10px;
        }

        &:last-child {
          color: #666;
          margin-top: 10px;

          i {
            color: $xtxColor;
            font-size: 14px;
            margin-right: 2px;
          }

          &:hover {
            color: $xtxColor;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.goods-tabs {
  min-height: 600px;
  background: #fff;

  nav {
    height: 70px;
    line-height: 70px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;

    a {
      padding: 0 40px;
      font-size: 18px;
      position: relative;

      >span {
        color: $priceColor;
        font-size: 16px;
        margin-left: 10px;
      }
    }
  }
}

.goods-detail {
  padding: 40px;

  .attrs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;

    li {
      display: flex;
      margin-bottom: 10px;
      width: 50%;

      .dt {
        width: 100px;
        color: #999;
      }

      .dd {
        flex: 1;
        color: #666;
      }
    }
  }

  >img {
    width: 100%;
  }
}

.good-commont{
  position: relative;
  width: 940px;
  margin-right: 20px;
  min-height: 1000px;

  .commont-head{
    h1{
      padding: 20px 0 0 20px;
    }
    ul{
      padding: 20px 0 10px 10px;
      margin-left: 10px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e0e0e0;


      li{
        font-size: 18px;
        margin-right: 40px;
      }
    }
    
  }

  .commont-item{
    ul{
      li{
        height: 150px;
        border-bottom: 1px solid #e0e0e0;
      }
    }
    .commont-box{
        display: flex;
        align-items: center;
        padding: 10px 0 0 30px;
        height: 150px;
    }

    .avater{
      width: 50px;
      height: 50px;
      margin-bottom: 50px;
      border-radius: 50%;
    }
    .main{
      margin-left: 30px;
    }
    .header p {
      font-size: 20px;
      font-weight: bold;
    }

    .content p {
        font-size: 18px;
        padding: 10px 0 10px 0px;
        color: #666;
      }

    .footer {
        font-size: 15px;
        color: #999;
        display: flex;
        align-items: center;
      .el-rate{
        margin-left: 20px ;
      }
      }
  }
  .el-pagination{
    position: absolute;
    padding: 10px;
    bottom: 0;
  }
}

.btn {
  margin-top: 20px;

}

.bread-container {
  padding: 25px 0;
}

.container{
  position:relative;
}
.other-container{
  position: absolute;
  right: 20px;
  top: 100px;
  font-size: 16px;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  gap: 10px; /* 间距 */
  .btn{
    margin-top: 5px;
    width: 60px;
    height: 120px;    
    border-radius: 8px;
    padding: 5px;
    opacity: 1;
    color: #fff;
    background: rgba(229, 134, 134, 0.66);
    transition: all .5s;
    text-align: center;

    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
  }
  }
}

.good-image{
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;
}
</style>